<template>
  <div class="wrapper">
    <minbar title="生日特权" :isPadding="true"></minbar>
    <image class="x-img" :src="imgurl"></image>
    <scroller show-scrollbar="flase">
        <div class="x-content">
          <div class="x-biday-div" v-for="(data,index) in bidayData" :key="index">
            <!-- 标题 -->
            <div class="x-biday-title">
              <text class="x-biday-text">{{data.storeName}}</text>
            </div> 
            <!-- 内容 -->
            <div class="x-biday-content">
              <text class="x-biday-yx">有效期：{{data.startDate}}至{{data.endDate}}</text>
              <div class="x-biday-button">
                <text class="x-button-text">待使用</text>
              </div>
            </div>
          </div> 
        </div>
    </scroller>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
  },
  data() {
    return {
      imgurl:asCore.localpath + "img/birthday.png",
      bidayData :[
        {
          storeName:"老裁缝家纺南通店",
          startDate:"2018-06-01",
          endDate:"2018-08-08"
        },
        {
          storeName:"老裁缝家纺安徽店",
          startDate:"2018-06-01",
          endDate:"2018-10-08"
        },
        {
          storeName:"老裁缝家纺北京店",
          startDate:"2018-06-01",
          endDate:"2018-10-1"
        },
        {
          storeName:"淘宝家纺北京店",
          startDate:"2018-06-01",
          endDate:"2018-10-1"
        },
        {
          storeName:"老裁缝家纺北京店",
          startDate:"2018-06-01",
          endDate:"2018-10-1"
        },
        {
          storeName:"老裁缝家纺北京店",
          startDate:"2018-06-01",
          endDate:"2018-10-1"
        }
      ]
    };
  },
  methods: {
    
  }
};
</script>
<style scoped>
.wrapper {
  background-color: #dedfe1;
}
.x-img {
  height:234px;
  width: 750px;
}
.x-content {
  align-items: center;
  padding-top:25px;
}
.x-biday-div {
  width: 700px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom:25px;
}
.x-biday-title {
  height:90px;
  justify-content: center;
  padding-left: 25px;
  border-bottom-color: #999999;
  border-bottom-style:dashed;
  border-bottom-width: 1px;
}
.x-biday-content {
  height:120px;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  flex-direction: row;
}
.x-biday-text {
  color: #1e1d23;
  font-size: 32px;
}
.x-biday-yx {
  flex: 1;
  color: #686868;
  font-size: 28px;
}
.x-biday-button {
  width: 150px;
  height:65px;
  border-color: #b00927;
  border-width: 1px;
  border-radius: 40px;
  align-items: center;
  justify-content: center;
  margin-right:25px;
}
.x-biday-button:active {
  background-color: #b00927;
}
.x-button-text:active {
  color: #fff;
}
.x-button-text {
  color: #b00927;
  font-size: 28px;
}
</style>

